<template>
  <div class="login-container text-center">
    <div class="container-header" />
    <el-row class="container-content">
      <el-col :span="14">
        <div class="img-box">
          <img :src="login_img">
        </div>
      </el-col>
      <el-col :span="10">
        <div class="login-box">
          <div class="logo-box">
            <div class="login-logo">
              <img :src="login_logo">
            </div>

          </div>
          <div class="login-box">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
              <div class="title-container">
                <h3 class="title">如期业务管理系统</h3>
              </div>
              <el-form-item prop="username">
                <el-input
                  ref="username"
                  v-model.trim="loginForm.username"
                  placeholder="请输入工号"
                  name="username"
                  type="text"
                  tabindex="1"
                  auto-complete="on"
                  prefix-icon="el-icon-user-solid"
                  autofocus
                  maxlength="50"
                  @keyup.enter.native="handleLogin"
                />
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model.trim="loginForm.password"
                  :type="passwordType"
                  placeholder="请输入登录密码"
                  name="password"
                  tabindex="2"
                  prefix-icon="el-icon-lock"
                  auto-complete="on"
                  maxlength="50"
                  @keyup.enter.native="handleLogin"
                />
              </el-form-item>
              <div class="remember-password">
                <el-checkbox v-model="isRememberPassword">记住密码</el-checkbox>
              </div>

              <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>

            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="container-footer text-center">
      <p>Copyright © 2016-2019 深圳市前海如期科技有限公司, All Rights Reserved.</p>
      <p>信用消费 快乐分期  如期业务管理系统Ver2.0</p>
    </div>
  </div>
</template>

<script>
import login_img from '@/assets/login_img.png'
import login_logo from '@/assets/login_logo.png'
import md5 from 'js-md5'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入工号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('请输入登录密码'))
      } else {
        callback()
      }
    }
    return {
      isRememberPassword: false,
      login_img: login_img,
      login_logo: login_logo,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined

    }
  },
  watch: {
    // $route: {
    //   handler: function(route) {
    //     this.redirect = route.query && route.query.redirect
    //   },
    //   immediate: true
    // }
  },
  mounted() {
    this.isRememberPassword = JSON.parse(localStorage.getItem('isRememberPassword'))
    if (this.isRememberPassword) {
      const tempObj = JSON.parse(localStorage.getItem('user'))
      tempObj.password = '******'
      this.loginForm = tempObj
    }
    // console.log(process.env.VUE_APP_BASE_API)
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          let params = null
          if (this.loginForm.password === '******') {
            params = JSON.parse(localStorage.getItem('user'))
            params.username = this.loginForm.username
            if (this.isRememberPassword) {
              localStorage.setItem('isRememberPassword', JSON.stringify(this.isRememberPassword))
              localStorage.setItem('user', JSON.stringify(params))
            } else {
              localStorage.removeItem('isRememberPassword')
              localStorage.removeItem('user')
            }
          } else {
            params = this.Utils.deepCopy(this.loginForm)
            params.password = md5(params.password)
            if (this.isRememberPassword) {
              localStorage.setItem('isRememberPassword', JSON.stringify(this.isRememberPassword))
              localStorage.setItem('user', JSON.stringify(params))
            } else {
              localStorage.removeItem('isRememberPassword')
              localStorage.removeItem('user')
            }
          }

          this.$store.dispatch('api/login', params).then((res) => {
            this.loading = false
            sessionStorage.setItem('username', params.username)

            this.$router.push({ path: '/home' })
          }).catch((res) => {
            // this.$message.error(res)
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.login-container {
 width: 100%;
 height: 100%;
 background-color:#009fe8;
 .container-header{
   height:120px;
 }
 .container-content{
   height:480px;
   .login-box{
     border-radius: 10px;
     width:400px;
     background-color:#fff;
     .logo-box{
      background-color:#009fe8;
      .login-logo {
          margin-left: 140px;
          width: 120px;
          height: 120px;
          border: 5px solid #93defe;
          border-radius: 100px;
          background: #fff;
          text-align: center;
          line-height: 110px;
          position: absolute;
          top: -60px;
          // left: 40px;
          img{
            width: 60px;
            height: 60px;
            display: inline-block;
            vertical-align: middle;
          }
      }
     }
     .login-box{
       padding:40px;
       .login-form{
         padding-top:40px;
         .remember-password{
           text-align: left;
           padding-bottom:10px;
         }
       }
     }
   }
 }
 .container-footer{
   background-color:#009fe8;
   padding-top:40px;
 }
}
</style>
